import React from 'react'
import { List } from 'antd-mobile'
import ClickWrapper from 'zhang-components/ClickWrapper'
import classNames from 'classnames'
import FormItemHOC from './form-hoc'

import './index.less'

const prefixCls = 'zhang-form-select-item'

class SelectItem extends React.Component {

  static defaultProps = {
    data: []
  }

  render() {
    const {
      className,
      data,
      value,
      onChange,
      ...others
    } = this.props

    const cls = classNames({
      [prefixCls]: true,
      [className]: className
    })

    return (
      <List.Item
        {...others}
        className={cls}
        extra={
          data && data.map((item, index) => {
            return (
              <ClickWrapper key={index} param={item.value} onClick={onChange}>
                <div className={`${prefixCls}-radio ${value === item.value? 'checked' : ''}`}>
                  {item.label}
                </div>
              </ClickWrapper>  
            )
          })
        }
      />
    )
  }
}

export default FormItemHOC(SelectItem)